<template>
  <el-dialog title="分配角色" :visible="showRoleDialog" :before-close="handleClose" @open="loadSettingList">
    <!-- 角色列表 -->
    <el-checkbox-group v-model="roleIds" v-loading="loading">
      <el-checkbox v-for="item in list" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
    </el-checkbox-group>
    <template #footer>
      <el-button type="primary" size="small" @click="handleSubmit"> 确定</el-button>
      <el-button size="small" @click="handleClose">取消</el-button>
    </template>
  </el-dialog>
</template>
<script>
import { getBaseInfo } from '@/api/user.js'
import { reqGetRoleList } from '@/api/setting'
import { reqAssignRoles } from '@/api/employees'
export default {
  name: 'AssignRole',
  props: {
    // 表示给该用户分配id
    currentUserId: {
      type: String,
      required: true
    },
    // 这个是弹窗标识符
    showRoleDialog: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      // 配置loading标志位
      loading: false,
      // 选中的角色的id
      roleIds: [],
      // 所有角色列表
      list: []
    }
  },
  methods: {
    // 点击确定需要做的事
    async handleSubmit() {
      // 1.点击确定需要明确点击的是谁
      // 2.点击的时候获取获取选中的角色
      // 需要传输的数据有获取的角色的id，和选中的角色的id
      const ret = await reqAssignRoles({ id: this.currentUserId, roleIds: this.roleIds })
      console.log(ret)
      if (ret.code === 10000) {
        // 关闭弹窗
        // 重新渲染数据
        // 分配角色成功
        this.$message.success(ret.message)
        // 关闭弹窗
        this.handleClose()
      }
    },
    // 获取所有的角色列表数据
    // 获取所有角色列表
    // async loadSettingList() {
    //   // 这样的话发请求是串行的，可以优化为并行的
    //   try {
    //     const info = await getBaseInfo(this.currentUserId)
    //     if (info.code === 10000) {
    //       this.roleIds = info.data.roleIds
    //     } else {
    //       this.$message.error('获取已有角色失败')
    //     }
    //   } catch {
    //     this.$message.error('获取已有角色失败')
    //   }
    //   try {
    //     const ret = await reqGetRoleList({ page: 1, size: 1000000 })
    //     // console.log(ret)
    //     // 获取后判断是否获取成功
    //     if (ret.code === 10000) {
    //       // 获取成功
    //       // 将数据转存到data中的list中
    //       this.list = ret.data.rows
    //       this.total = ret.data.total
    //     } else {
    //       this.$message.error('获取角色列表失败')
    //     }
    //   } catch {
    //     this.$message.error('获取角色列表失败')
    //   }
    // },
    // 可以优化为
    loadSettingList() {
      this.loading = true
      // 获取已有的角色列表
      const info = getBaseInfo(this.currentUserId)
      // 获取所有的列表
      const ret = reqGetRoleList({ page: 1, pagesize: 10000 })
      // 这个是Promise的all方法，可以讲请求设置为并行得
      Promise.all([info, ret])
        .then(result => {
          // 获取已有角色
          this.roleIds = result[0].data.roleIds
          // 获取所有角色
          this.list = result[1].data.rows
        })
        .catch(() => {
          this.$message.error('获取角色失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleClose() {
      // 这个传值得意思就是表示可以在父组件使用sync修饰符，使得数据双向绑定
      this.$emit('update:showRoleDialog', false)
    }
  }
}
</script>
